<template>
	<view>
		<u-popup v-model="show" mode="center" border-radius="16" height="800rpx">
			<view class="upload_box">
				<view class="title" style="padding:40rpx 80rpx;">信息填写</view>
				<!-- <view class="text" style="padding:40rpx 30rpx;"> -->
				<!-- <view class="text" style="padding:40rpx 30rpx;" v-if='pay_channel==1'>
					<view class="item">您需要我们充值的号码如下（如无号码，请填写您激活的号码）</view>
					<u-input style="margin-bottom: 20rpx;" v-model="chong_phone" type="text" placeholder='请填写' border/>
					
					<u-input style="margin-bottom: 20rpx;" v-model="phone" type="text" placeholder='请填写电话号码' border/>
				</view> -->
				<view class="text" style="padding:40rpx 30rpx;" >
					<view class="item">您需要我们充值的号码如下（如无号码，请填写您激活的号码）</view>
					<!-- <u-input style="margin-bottom: 20rpx;" v-model="chong_phone" type="text" placeholder='请填写' border/> -->
					
					<u-input style="margin-bottom: 20rpx;" v-model="phone" type="text" placeholder='请填写电话号码' border/>
				</view>
				<!-- <view class="text" style="padding:40rpx 30rpx;">
					<u-input style="margin-bottom: 20rpx;" type="text" placeholder='请填写电话号码' border/>
				</view> -->
				<view v-if="pay_channel==2" style="padding:40rpx;">
				<view class="image" @click="upImgBtn">
					<image v-if="fullurl" :src="fullurl" mode="aspectFill"></image>
					<image v-else src="@/static/images/upImg2.png" mode=""></image>
					
					<view class="item">请上传您在快递处拍摄的充值二维码</view>
				</view>
				</view>
				<view class="btn">
					<text class="btn_left" @click="show=false">取消</text>
					<text class="btn_right" @click="defineBtn">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"upload_payment",
		data() {
			return {
				show:false,
				type:1,//仓储零售提货==1 进货==2 提现==3
				id:'',
				url:'',
				phone:'',
				chong_phone:'',
				pay_channel:'',
				fullurl:'',
			};
		},
		methods:{
			openBtn(val,type,phone){
				this.id          = val
				this.pay_channel = type
				this.show        = true
				this.phone       = phone
			},
			// 上传图片
			upImgBtn(){
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.$tips.showLoading('上传中')
						const uploadTask = uni.uploadFile({
							url: that.$baseVal.baseUrl+'/api/Common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							formData: {
								'type':that.type==1?'platform_certificate':that.type==2?'user_certificate':'shop_withdra_audit'
							},
							success: function(uploadFileRes) {
								that.$tips.hideLoading()
								var res = JSON.parse(uploadFileRes.data)
								if(res.code==1){
									that.fullurl=res.data.fullurl
									that.url=res.data.url
								}
							}
						});
					},
					error: function(e) {
						// console.log(e);
					}
				})
			},
			defineBtn(){
				var that = this
				if(!that.phone){
					that.$tips.showToast('请填写电话号')
					return
				}
				// if(!that.chong_phone){
				// 	that.$tips.showToast('请填写充值号码')
				// 	return
				// }
				if(that.url=='' && that.pay_channel == 2){
					that.$tips.showToast('请上传支付凭证')
					return
				}
				that.$tips.showLoading('提交中')
				var params = {
					order_id:that.id,
					image:that.url,
					// chong_phone:that.chong_phone,
					phone:that.phone,
					pay_channel:that.pay_channel,
					card_type:'2'
				}
				that.$httpApi.Orderimage(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('提交成功')
						that.id=''
						that.url=''
						that.fullurl = ''
						that.phone=''
						that.chong_phone=''
						that.pay_channel=''
						that.show=false
						that.$emit('submit')
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.upload_box{
		width: 100%;
		height: 100%;
		padding: 40rpx 0;
		background: red;
		background: linear-gradient(to bottom, rgba(38, 194, 129, 0.20), rgba(38, 194, 129, 0), rgba(38, 194, 129, 0));
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.title{
			width: 100%;
			font-size: 36rpx;
			text-align: center;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}
		.image{
			width: 100%;
			height: 160rpx;
			image{
				display: block;
				width: 160rpx;
				height: 160rpx;
				margin: auto;
			}
		}
		.btn{
			width: 100%;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			text{
				display: block;
				width: 247rpx;
				height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.btn_left{
				color: #999;
				border: 1px solid #999999;
			}
			.btn_right{
				color: #fff;
				background: #26C281;
			}
		}
	}
</style>